<!--
 * new page
 * @author: zhangpeiyang
 * @since: 2024-06-10
 * list.vue
-->

<template>
  <div class="words-list">
    <SignaturePad v-if="showSign" @handleSign="(url) => handleSign(false, url)" />
    <nav-bar :title="$route.meta.title" />
    <div v-for="( word, index ) in wordList " :key="index" class="container" @click="() => showDetail(word.id)">
      <div class="content">
        <div class="message-card">
          <h2 class="message-title">{{ word.wordName }}</h2>
          <p class="message-text text-truncate">
            {{ word.wordContent }}
          </p>
        </div>
        <!-- 其他消息卡片 -->
      </div>
    </div>
    <div class="sign">
      <div class="label">签名:</div>
      <div class="sign-img" @click="() => handleSign(true)">
        <img v-if="signImgPath" :src="signImgPath">
      </div>
    </div>
  </div>
</template>

<script>
import { getWords, uploadSign, getUserSign } from '@/api/user'
import { base64uploadFile } from '@/api/upload'
import NavBar from '@/components/NavBar'
import SignaturePad from '@/components/SignaturePad/index.vue'
import axios from 'axios'

export default {
  name: 'WordsCom',
  components: {
    NavBar,
    SignaturePad
  },
  data() {
    return {
      wordList: [],
      showSign: false,
      signImgPath:
        'http://47.121.128.80:3000/upload/2024/06/16/8ccc7e29037710e3f28c357c812832da.jpg'
    }
  },
  computed: {},
  mounted() {
    this.getWordsData()
    getUserSign().then((res) => {
      this.signImgPath = res.map.userSign
    })
  },
  methods: {
    async handleSign(flag, url) {
      this.showSign = flag
      if (url) {
        console.log('url:', url)
        const res = await base64uploadFile({
          base64content: url,
          filename: 'sign.jpg'
        })
        const { url: resUrl } = res.map
        console.log(res)
        const uploadRes = await uploadSign({
          sign: resUrl
        })
        console.log('uploadRes:', uploadRes)
        getUserSign().then((res) => {
          this.signImgPath = res.map.userSign
        })
      }
    },
    async getWordsData() {
      const res = await getWords()
      if (res && res.map && res.map.words) {
        this.wordList = res.map.words
      }
    },
    showDetail(id) {
      this.$router.push({ name: 'Worddetail', params: { id: id }})
    }
  }
}
</script>

<style scoped>
.words-list {
  background: #f5f5f5;
  min-height: 100vh;
}

.container {
  padding: 1rem;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-button,
.close-button {
  color: #a1a1aa;
}

.title {
  margin-left: 0.5rem;
  font-size: 1.125rem;
  font-weight: bold;
  color: #18181b;
}

.message-card {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.message-title {
  color: #18181b;
  font-weight: bold;
}

.message-text {
  color: #71717a;
  margin-top: 0.5rem;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.sign {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign .label {
  font-size: 1.5rem;
  margin-right: 120px;
}

.sign-img {
  border: 1px solid #777;
  width: 80px;
  height: 240px;
  transform: rotate(-90deg);
}

.sign-img img {
  width: 100%;
  height: 100%;
}
</style>
